checkLogin()
// 更新用户名信息渲染页面
getname()
// 更新看版渲染页面
getAuthorization()
// 退出登录
logout()

// 封装获取看板数据函数
async function getAuthorization() {
    if (!localStorage.getItem('token')) return

    const res = await axios({
        url: '/dashboard',
    })
    console.log(res);
    // 调用渲染函数
    render(res.data.data.overview)
    const lineChart = randerLine(res.data.data.year)
    const salaryChart = randerSalary(res.data.data.salaryData)
    const linesChart = randerLines(res.data.data.groupData)
    const genderChart = randerGender(res.data.data.salaryData)
    window.addEventListener('resize', function () {
        // 图标自适应
        lineChart()
        salaryChart()
        linesChart()
        genderChart()
    })
}
// 封装渲染函数
function render(data) {
    for (let k in data) {
        if (k === 'age') {
            document.querySelector(`.${k}`).innerText = data[k].toFixed(2) + '岁'
        }
        else {
            document.querySelector(`.${k}`).innerText = data[k]
        }
    }
}
// 封装图标line渲染函数
function randerLine(data) {
    const line = document.querySelector('#line')
    const option = {
        title: {
            text: '2022全学科薪资走势',
            left: 20,
            top: 20
        },
        tooltip: {},
        legend: {
            data: ['薪资']
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: data.map(item => { return item.month })
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '薪资',
                type: 'line',
                smooth: true, // 使折线平滑
                symbol: 'circle', // 添加小圆点标记
                symbolSize: 8, // 设置圆点大小
                lineStyle: {
                    width: 4,// 设置折线宽度
                    color: '#5f78e6'
                },
                itemStyle: {
                    color: '#FFFFFF', // 设置小圆点颜色为白色
                    borderColor: '#5f78e6', // 设置小圆点边框颜色为蓝色
                    borderWidth: 2 // 设置小圆点边框宽度
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            { offset: 0, color: '#87CEEB' }, // 起始颜色
                            { offset: 0.7, color: '#FFFFFF' } // 结束颜色
                        ]
                    )
                },
                emphasis: {
                    focus: 'series'
                },
                data: data.map(item => { return item.salary })
            }
        ]
    };
    const myChart = echarts.init(line);
    myChart.setOption(option);
    return function () {
        myChart.resize()
    }
}

// 封装工资饼状图salary函数
function randerSalary(data) {
    const salary = document.querySelector('#salary')
    const option = {
        title: {
            text: '班级薪资分布',
            left: 'center',
            top: 20,
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'horizontal',  // 设置为横向排列
            left: 'center',
            bottom: '5%',          // 将图例放到底部
            data: data.map(item => { return item.label }),
            textStyle: {            // 设置图例文字样式
                color: '#000'
            }
        },
        series: [
            {
                name: '等级分布',
                type: 'pie',
                radius: ['40%', '70%'],  // 调整内圆和外圆的半径
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,           // 不显示文字
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: false       // 悬浮时不显示文字
                    }
                },
                labelLine: {
                    show: false
                },
                data: data.map(item => {
                    return {
                        value: item.g_count * item.b_count,
                        name: item.label,
                    }
                })
            }
        ]
    };
    const myChart = echarts.init(salary)
    myChart.setOption(option)
    return function () {
        myChart.resize()
    }
}

// 封装工资柱状图lines函数
function randerLines(data) {
    const lines = document.querySelector('#lines')
    const option = {
        title: {
            text: '班级每组薪资',
            left: '20',
            top: '10'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['期望薪资', '实际薪资'],
            orient: 'horizontal',
            top: '5%',
            right: '5%',
            textStyle: {
                color: '#000'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '15%',
            containLabel: true
        },
        yAxis: {
            type: 'value',
            nameLocation: 'middle',
            nameGap: 20,
            min: 0,
            max: 25000,
            interval: 5000,
            axisLabel: {
                formatter: '{value}'
            },
            splitLine: { // 设置 x 轴分割线为虚线
                show: true,
                lineStyle: {
                    type: 'dashed',
                    color: '#808080'
                }
            }
        },
        xAxis: {
            type: 'category',
            data: data[1].map(item => { return item.name }),
            axisTick: {
                alignWithLabel: true
            },
            axisLine: { // 设置 x 轴线为虚线
                lineStyle: {
                    type: 'dashed', // 虚线类型
                    color: '#808080'
                }
            },

        },
        series: [
            {
                name: '期望薪资',
                type: 'bar',
                barWidth: '40%', // 控制柱状图的宽度
                barGap: '-100%', // 控制柱状图之间的间距
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [{
                            offset: 0,
                            color: '#00BFFF' // Light Blue
                        }, {
                            offset: 1,
                            color: '#FFFFFF' // White
                        }]
                    )
                },
                data: data[1].map(item => { return item.hope_salary }),
            },
            {
                name: '实际薪资',
                type: 'bar',
                barWidth: '40%',
                barGap: '10%',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [{
                            offset: 0,
                            color: '#00FF7F' // Lime Green
                        }, {
                            offset: 1,
                            color: '#FFFFFF' // White
                        }]
                    )
                },
                data: data[1].map(item => { return item.salary }),
            }
        ]
    };
    const myChart = echarts.init(lines)
    myChart.setOption(option)
    document.querySelector('#btns').addEventListener('click', function (e) {
        if (e.target.tagName === 'BUTTON') {
            document.querySelector('.btn-blue').classList.remove('btn-blue')
            e.target.classList.add('btn-blue')
            const index = e.target.innerText
            option.xAxis.data = data[index].map(item => { return item.name })
            option.series[0].data = data[index].map(item => { return item.hope_salary })
            option.series[1].data = data[index].map(item => { return item.salary })
            myChart.setOption(option)
        }
    })
    return function () {
        myChart.resize()
    }
}

// 封装gender函数
function randerGender(data) {
    const gender = document.querySelector('#gender')
    // 配置项
    const option = {
        title: [{
            text: '性别分布',
            left: '20px',
            top: '30px',
        },
        {
            text: '男生',
            left: '50%',
            top: '50%',
            textAlign: 'center',
            textBaseline: 'middle',
            textStyle: {
                color: '#000',
                fontSize: 20,
                fontWeight: 'bold'
            }
        },
        {
            text: '女生',
            left: '50%',
            bottom: '3%',
            textAlign: 'center',
            textBaseline: 'middle',
            textStyle: {
                color: '#000',
                fontSize: 20,
                fontWeight: 'bold'
            }
        }],
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            show: false
        },
        series: [
            {
                name: '男',
                type: 'pie',
                radius: ['30%', '45%'],
                center: ['50%', '30%'],
                avoidLabelOverlap: false,
                label: {
                    show: true,
                    position: 'outside'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '15',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: true
                },
                data: data.map(item => { return { value: item.b_count, name: item.label } })
            },
            {
                name: '女',
                type: 'pie',
                radius: ['30%', '45%'],
                center: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: true,
                    position: 'outside'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '15',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: true
                },
                data: data.map(item => { return { value: item.g_count, name: item.label } })
            }
        ]
    }
    const myChart = echarts.init(gender)
    myChart.setOption(option)
    return function () {
        myChart.resize()
    }
}
// 封装地图函数
function randerMap() {

}